<template>
	<view class="article-box">
		<view class="article-text">
			<uv-text bold size="32rpx" :lines="2" :text="list.title"></uv-text>
			<view class="article-doc">
				<text>{{list.doctorName}}</text>
				<text>{{list.doctorTitle}}</text>
			</view>
		</view>
		<view class="article-img">
			<image :src="list.image" mode=""></image>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	list: {
		type: Object,
		required: true,
	    default: () => []
	}
})
</script>

<style lang="scss" scoped>
	.article-box{
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		height: 208rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		.article-text{
			font-size: 32rpx;
			color: #2b313d;
			width: 384rpx;
			font-weight: bold;
			.article-doc{
				margin-top: 10rpx;
				font-weight: normal;
				color: #626262;
				font-size: 28rpx;
				display: flex;
				gap: 10rpx;
			}
		}
		.article-img{
			width: 180rpx;
			height: 136rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>